<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            html {
                margin: 0;
            }

            body {
                margin: 0;
                width: 100%;
                height: 100%;
            }

            #container {
                margin: 0 auto;
            }

            .center {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                font-size: 12px;
            }

            .center img {
                width: 48px;
                height: 48px;
                margin-bottom: 6px;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://cdn.jsdelivr.net/npm/@antv/x6@1.1.1/dist/x6.js"></script>
        <script>
            const graph = new X6.Graph({
                container: document.getElementById('container'),
                grid: false,
                width: 1100,
                height: 600,
                background: {
                    color: '#fffbe6', // 设置画布背景颜色
                },
            });

            const base = graph.addNode({
                shape: 'html',
                x: 490,
                y: 500,
                width: 120,
                height: 70,
                html() {
                    return `<div class="center">
                        <img src="https://i.ibb.co/d2F8w7M/server.png" />
          <span>百度员工</span>
        </div>`;
                },
            });

            const base1 = graph.addNode({
                shape: 'html',
                x: 490,
                y: 380,
                width: 120,
                height: 70,
                html() {
                    return `<div class="center">
                        <img src="https://i.ibb.co/d2F8w7M/server.png" />
          <span>邮件服务器</span>
        </div>`;
                },
            });

            const source = graph.addNode({
                shape: 'html',
                x: 0,
                y: 240,
                width: 120,
                height: 70,
                shape: 'html',
                html() {
                    return `<div class="center">
                        <img src="https://i.ibb.co/d2F8w7M/server.png" />
          <span>科技园出口</span>
        </div>`;
                },
            });

            const source1 = graph.addNode({
                shape: 'html',
                x: 140,
                y: 240,
                width: 120,
                height: 70,
                html() {
                    return `<div class="center">
                        <img src="https://i.ibb.co/d2F8w7M/server.png" />
          <span>北京华威出口</span>
        </div>`;
                },
            });

            const source2 = graph.addNode({
                shape: 'html',
                x: 280,
                y: 240,
                width: 120,
                height: 70,
                html() {
                    return `<div class="center">
                        <img src="https://i.ibb.co/d2F8w7M/server.png" />
          <span>美国出口</span>
        </div>`;
                },
            });

            const topBase = graph.addNode({
                shape: 'html',
                x: 490,
                y: 60,
                width: 120,
                height: 70,
                html() {
                    return `<div class="center">
                        <img src="https://i.ibb.co/d2F8w7M/server.png" />
          <span>外部邮箱</span>
        </div>`;
                },
            });

            graph.addEdge({
                source: base,
                target: base1,
                router: {
                    name: 'manhattan',
                },
            });

            graph.addEdge({
                source: base1,
                target: source,
                router: {
                    name: 'manhattan',
                },
                vertices: [{x: 200, y: 380}],
            });

            graph.addEdge({
                source: base1,
                target: source1,
                router: {
                    name: 'manhattan',
                },
                vertices: [{x: 200, y: 380}],
            });

            graph.addEdge({
                source: base1,
                target: source2,
                router: {
                    name: 'manhattan',
                },
                vertices: [{x: 200, y: 380}],
            });

            graph.addEdge({
                source: source,
                target: topBase,
                router: {
                    name: 'normal',
                },
                vertices: [
                    {x: 60, y: 160},
                    {x: 200, y: 160},
                    {x: 200, y: 90},
                ],
            });

            graph.addEdge({
                source: source1,
                target: topBase,
                router: {
                    name: 'normal',
                },
                vertices: [
                    {x: 200, y: 160},
                    {x: 200, y: 90},
                ],
            });

            graph.addEdge({
                source: source2,
                target: topBase,
                router: {
                    name: 'normal',
                },
                vertices: [
                    {x: 340, y: 160},
                    {x: 200, y: 160},
                    {x: 200, y: 90},
                ],
            });

            graph.on('signal', (cell) => {
                if (cell.isEdge()) {
                    const view = graph.findViewByCell(cell);
                    if (view) {
                        const token = X6.Vectorizer.createVector('circle', {r: 6, fill: '#feb662'});
                        const base = cell.getTargetCell();
                        setTimeout(() => {
                            view.sendToken(token.node, 2000, () => {
                                if (base) {
                                    graph.trigger('signal', base);
                                }
                            });
                        }, 300);
                    }
                } else {
                    const edges = graph.model.getConnectedEdges(cell, {
                        outgoing: true,
                    });
                    edges.forEach((edge) => graph.trigger('signal', edge));
                }
            });

            let manual = false;

            const trigger = () => {
                graph.trigger('signal', base);
                if (!manual) {
                    setTimeout(trigger, 3000);
                }
            };

            trigger();
        </script>
    </body>
</html>
